<template>
  <div class="vm-image-list">
    <Row class="image-list-heading vm-panel">
      <div class="panel-heading">
        Image List
      </div>
      <Row type="flex" justify="end" class="panel-body">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="[40, 80, 240, 480]"
            :page-size="page_size"
            layout="prev, pager, next, sizes"
            :total="total_num">
        </el-pagination>
      </Row>
    </Row>
    <Row class="image-list" :gutter="16">
      <viewer :images="imageList">
      <Col :lg="3" :md="6" :sm="12" class="vm-margin" v-for="item in imageList" :key="item.id" :url="item.image_path">
        <VmCard :image_id="item.id"
                :image_name="item.image_name"
                :type_name="item.type_name"
                :image_path="item.image_path+'?x-oss-process=image/resize,w_100'"
                :upload_time="item.upload_time"
                :image_size="item.image_size"
                :download_url="item.image_path"
                :albumList="albumList">
        </VmCard>
      </Col>
        <el-backtop></el-backtop>
      </viewer>
    </Row>
  </div>
</template>
<script>
import VmCard from '@/components/vm-card'

export default {
  name: 'VmImageList',
  components: {
    VmCard
  },
  data: function () {
    return {
      album_id: 0,
      imageList: [
        {
          id: 0,
          image_name: "demo.png",
          image_path: "@/assets/log.png",
          image_size: "88.88K",
          type_name: "default",
          upload_time: "2000-02-22 00:00:00",
        }
      ],
      current_page: 1,
      page_size: 40,
      total_num: 0,
      albumList: [{
        album_id: '0',
        type_name: 'default'
      }]
    }
  },
  methods: {
    getImageList(){
      const _this = this;
      this.axios.get(_this.API.http_image + 'get_list',{params:{
          album_id : _this.album_id,
          current_page : _this.current_page,
          page_size : _this.page_size,
        }}).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.imageList = respData.data.list
                _this.total_num = respData.data.total_num
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
    handleSizeChange(val) {
      this.page_size = val
      this.getImageList()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.getImageList()
    },
    getAlbumList() {
      const _this = this;
      this.axios.get(_this.API.http_album + 'get_list').then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.albumList = respData.data
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
  },
  created() {
    if(this.$route.query.album_id) {
      this.album_id = this.$route.query.album_id
    }
    this.getImageList()
    this.getAlbumList()
  },
  watch:{
    $route(to){
      if (to.query.album_id){
        this.album_id = to.query.album_id
        this.getImageList()
      }else {
        this.album_id = 0
        this.getImageList()
      }
    }
  }
}
</script>
